<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>


		<style>
			select {
				display: block;
				width: 90px;
				height: 100%;
				margin: 0px;
				padding: 0px;
				background-color: transparent;
				border: none;
				overflow : hidden
			}
			
			option{
				margin: 2px 0;
			}
			

			.but {
				display: inline-block;
				width: 30px;
				/* height: 125px; */
				/* text-align: center; */

			}

			button {
				height: 25px;
				width: 30px;
				margin-top: 5px;
			}

			.left,
			.right {
				display: inline-block;
				border: 1px solid rebeccapurple;
				height: 125px;
				width: 90px;
			}

			.box {
				margin: 0px auto;
				width: 300px;
				height: 125px;
				display: flex;
				justify-items: center;
				align-items: center;

			}

			.left,
			.but,
			.right {
				margin: 5px;
			}

			.selected {
				background-color: cornflowerblue;
			}
			
			select[value]
		</style>

	</head>
	<body>
		<div class="box">
			<div class="left">
				<select multiple>
					<option value="a">a</option>
					<option value="b">b</option>
					<option value="c">c</option>
					<option value="d">d</option>
				</select>
			</div>

			<div class="but">

				<button onclick="mv('right')"> >> </button>
				<button onclick="mv('left')">
					<< </button>

			</div>

			<div class="right">
				<select multiple>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
				</select>
			</div>
		</div>
	</body>



</html>
<script>
	function mv(src){
		let des = (src == 'right')? 'left':'right';
		let left_obj = document.getElementsByClassName(des)[0];
		let selectedObj = left_obj.querySelectorAll("option:checked");
		let right_obj = document.querySelector("."+src+" > select");
		for(let i = 0 ; i<selectedObj.length;i++ ){
			right_obj.appendChild(selectedObj[i]);
		}
	}
	
	
</script>
